<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in item.image" @click="handlePreViewImage(index)">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="title">{{ item.title }}</view>
		<view class="desc">{{ item.word }}</view>
		<uni-goods-nav class="uni-goods-nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	import { mapMutations, mapGetters } from 'vuex'
	export default {
		watch: {
			totalCount(newValue) {
				this.options[2].info = newValue
				uni.setTabBarBadge({
				  index: 2,
				  text: newValue + ''
				})
			}	
		},
		computed: {
			...mapGetters('car', ['totalCount'])
		},
		data() {
			return {
				item: {},
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		methods: {
			...mapMutations('car', ['addCar']),
			getDetail(id) {
				uni.request({
					url: 'http://localhost:3000/list/' + id,
					success: resp => {
						this.item = resp.data
					}
				})
			},
			handlePreViewImage(index) {
				uni.previewImage({
					urls: this.item.image,
					current: index,
				})
			},
			onClick(e) {
				if(e.index === 2) {
					uni.switchTab({
						url: "/pages/car/car"
					})
				}
			},
			buttonClick(e) {
				if(e.index === 0) {
					// 加入购物车
					this.addCar({
						...this.item,
						count: 1,
						state: false
					})
				}
			}
		},
		// 获取路由的查询参数 id
		onLoad(options) {
			// console.log(this.totalCount)
			this.options[2].info = this.totalCount
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.getDetail(options.id);


			/************  ************/
			// call bind apply 
			// 1. 都是 this 指向
			// 2. call 和 apply 立即执行， bind 返回修改this指向的函数
			// 3. call 和 bind 参数一样， 第一个参数this， 从第二个参数起， 分别对应实惨
			// 4. apply 接收两个参数， 第一个this指向， 第二个值是一个数组，数组每一项分别对应实参


			// const str = '12345';

			// const s1 = Array.prototype.reduce.call(str, (p, n) => {
			// 	return p + +n
			// }, 0);

			// const s2 = Array.prototype.reduce.apply(str, [(p, n) => {
			// 	return p + +n
			// }, 0]);

			// const s3 = Array.prototype.reduce.bind(str, (p, n) => {
			// 	return p + +n
			// }, 0);

			// console.log(s1, s2, s3);


			// var name = '王武';
			// const o = {
			// 	name: '张三'
			// };

			// const o1 = {
			// 	name: '里斯'
			// };

			// function fn(a,b,c) {
			// 	console.log(this.name, a,b,c)
			// };

			// fn.call(o, 1,2,3)
			// fn.apply(o1, [1,2,3])
			// const s = fn.bind(window, 1,2,3)
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 400rpx;
		}
	}

	.uni-goods-nav {
		position: fixed;
		bottom: 0%;
		left: 0%;
		width: 100%;
	}
</style>